<template>
  <div class="operation-bar">
    <div class="flex flex-row">
      <template v-for="(item, idx) in buttonOptions" :key="idx">
        <el-button
          plain
          text
          style="padding: 0; border: none"
          :style="{ color: item.color }"
          :icon="item.icon"
          :disabled="item.disabled"
          @click="item.click"
        >
          {{ item.innerText }}
        </el-button>
        <div v-if="idx !== buttonOptions.length - 1" class="data-btn-divide"></div>
      </template>
    </div>
    <div class="flex-1"></div>
    <div>
      <el-button
        type="primary"
        icon="Operation"
        style="width: 100px"
        @click="advancedQueryShow = true"
      >
        高级查询
      </el-button>
    </div>

    <el-dialog
      v-model="advancedQueryShow"
      title="高级查询"
      width="800px"
      append-to-body
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <form-create v-model="value" v-model:api="fApi" :rule="rule" :option="option" />
      <div class="flex flex-row items-center justify-end">
        <el-button type="primary" icon="Search" @click="search">搜索</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import { computed, nextTick, ref, defineProps, defineEmits } from 'vue';

  const props = defineProps({
    queryParams: {
      type: Object,
      default: () => ({}),
    },
    field: {
      type: Array,
      default: () => [],
    },
    permissionPrefix: {
      type: String,
      default: '',
    },
    single: {
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    handleQuery: {
      type: Function,
      default: () => {},
    },
    handleAdd: {
      type: Function,
      default: () => {},
    },
    handleUpdate: {
      type: Function,
      default: () => {},
    },
    handleSelectionDelete: {
      type: Function,
      default: null,
    },
    handleDownloadTpl: {
      type: Function,
      default: null,
    },
    handleUpload: {
      type: Function,
      default: null,
    },
    handleExport: {
      type: Function,
      default: null,
    },
  });

  const emits = defineEmits(['update:queryParams']);

  const advancedQueryShow = ref(false);
  const fApi = ref(null);
  const option = ref({
    submitBtn: false,
    form: {
      inline: false,
      'label-width': '100px',
    },
  });
  const value = computed({
    get() {
      return props.queryParams;
    },
    set(val) {
      emits('update:queryParams', val);
    },
  });
  const rule = computed(() => props.field);

  const buttonOptions = computed(() => {
    const operationMap = new Map([
      [
        'handleDownloadTpl',
        {
          permi: `${props.permissionPrefix}:template`,
          icon: 'Download',
          color: '#0891b2',
          click: props.handleDownloadTpl,
          innerText: '模板下载',
          disabled: false,
        },
      ],
      [
        'handleUpload',
        {
          permi: `${props.permissionPrefix}:import`,
          icon: 'Upload',
          color: '#2563eb',
          click: props.handleUpload,
          innerText: 'EXCEL导入',
          disabled: false,
        },
      ],
      [
        'handleExport',
        {
          permi: `${props.permissionPrefix}:export`,
          icon: 'Download',
          color: '#9333ea',
          click: props.handleExport,
          innerText: '导出',
          disabled: false,
        },
      ],
      [
        'handleAdd',
        {
          permi: `${props.permissionPrefix}:add`,
          icon: 'Plus',
          color: '#84cc16',
          click: props.handleAdd,
          innerText: '新增',
          disabled: false,
        },
      ],
      [
        'handleUpdate',
        {
          permi: `${props.permissionPrefix}:edit`,
          icon: 'Edit',
          color: '#facc15',
          click: props.handleUpdate,
          innerText: '修改',
          disabled: props.single,
        },
      ],
      [
        'handleSelectionDelete',
        {
          permi: `${props.permissionPrefix}:delete`,
          icon: 'Delete',
          color: '#dc2626',
          click: props.handleSelectionDelete,
          innerText: '删除（通过左侧勾选）',
          disabled: props.multiple,
        },
      ],
    ]);
    return [...operationMap.keys()].filter((fn) => props[fn]).map((k) => operationMap.get(k));
  });

  function search() {
    props.handleQuery();
    advancedQueryShow.value = false;
  }

  function reset() {
    fApi.value?.resetFields();
    nextTick(() => {
      search();
    });
  }
</script>

<style lang="scss">
  .operation-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    margin-bottom: 10px;

    .data-btn-divide {
      display: inline-block;
      width: 1px;
      height: 16px;
      margin: auto 10px;
      background-color: #c7c7c7;
    }
  }
</style>
